<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-报名流程</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=06" />
	</head>
	<body>
		<!-- 0元学 --> 
		<div class="processIndex">
			<div class="content">
				<div class="title flex juscenter">
					<span class="small"></span><span class="big"></span>
					<h3>简单<i>3步</i>成为创始顾问</h3>
					<span class="big"></span><span class="small"></span>
				</div>
				<div class="item flex juscbtween">
					<div class="number">1</div>
					<div class="info">
						<h4>关注<i>启蒙优选</i>公众号</h4>
						<p>可享受官方消息提醒、随时召唤客服、官方商城下单</p>
					</div>
					<button class="nohave followButton one"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODcyNjgyNQ==&scene=124#wechat_redirect">去关注</a></button>
					
				</div>
				<div class="item flex juscbtween">
					<div class="number">2</div>
					<div class="info">
						<h4>绑定<i>邀请人</i></h4>
						<p>邀请人可以为您提供专业、及时的咨询服务，以及育儿交流</p>
					</div>
					<if condition="$parent neq ''">
						<button class="yesHave"><a href="#">已完成</a></button>
					<else/>
						<button class="nohave"><a href="/my_team">去绑定</a></button>
					</if>
					
				</div>
				<div class="item flex juscbtween">
					<div class="number">3</div>
					<div class="info">
						<h4>了解<i>新手顾问课程</i></h4>
						<p>帮助您快速掌握优秀顾问必备技能</p>
					</div>
					<button class="nohave lookButton"><a href="https://www.yuque.com/books/share/5c02f4c9-c3cd-4909-aaa1-ff4cc8a3a97f?#">去了解</a></button>
				</div>

				<if condition="$parent neq ''">
					<div class="submitButton canClick">确认报名</div>
				<else/>
					<div class="submitButton dontClick">确认报名</div>
				</if>
				

				<!-- 报名成功弹框 -->
				<div class="processSuccessMask close">
					<div class="processSuccessBox flex juscenter flexdirection bubbling">
						<h3>报名成功啦！</h3>
						<button class="gotoIndex">开启育儿育己之旅</button>
						<button class="shareFriend">分享给好友</button>
					</div>
				</div>
			</div>
			<!-- 分享海报 -->
			<div class="inviteFriendMask close">
				<div class="tipTextBox">
					<div class="inviteFriendBox bubbling" id="inviteFriendBox">
						<img src="" alt="" id="backgroundImg">
						<div class="userInfo flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="" alt="" id="userHead">
								<div class="info flex flexdirection">
									<h3 class="userName"></h3>
									<p>邀请您一起育儿育己~</p>
									<!-- <span class="inviteCode" style="white-space: nowrap">邀请码：<i id="inviteCode"></i></span> -->
								</div>
							</div>
							<div class="right">
								<img src="" alt="" id="userCode">
							</div>
						</div>
					</div>
					<div class="tipText">长按海报保存至手机</div>
				</div>
			</div>
			<!-- <div class="shareMask close">
				<div class="shareBox flex juscbtween bubbling">
					<div class="shareitem shareUrlButton">
						<img src="__TMPL__/home/public/assets/img/shareUrl.png" alt="">
						<p>分享链接</p>
					</div>
					<div class="shareitem" id="inviteShareButton">
						<img src="__TMPL__/home/public/assets/img/shareDown.png" alt="">
						<p>生成海报</p>
					</div>
				</div>
			</div> -->
			<!-- 引导分享 -->
			<div class="yindaoShareMask close">
				<img src="__TMPL__/home/public/assets/img/yindaoShareImg.png" alt="">
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			//隐藏所有弹框
			$('.close').click(function(){
				$(this).hide();
			})

			//冒泡，禁止点击
			$('.bubbling').click(function(){
				return false;
			})
			
			$('.shareUrlButton').click(function(){
				$('.yindaoShareMask').show();
			})

			$('.dontClick').click(function(){
				return layer.msg('请先完成上方报名流程！')
			})

			//显示报名成功弹框
			$('.canClick').click(function(){
		        $.ajax({
		          	url: '/add_act_one',
		          	type: 'POST',
		          	data: {},
		        }).done(function(res) {
		          	if(res.code == 200){
						$('.processSuccessMask').show();
		          	}else{
		                layer.msg(res.msg);
		          	}
		        }).fail(function(err) {
		            layer.msg(err.msg);
		        })
			})

			//获取海报信息
			function getUserInfo(){
				$.ajax({
					url: '/fx/invite_info',
					type: 'POST',
					data: {type:2},
				}).done(function(res) {
					if(res.code == 200){
						var data = res.data;
						headImg = data.logo;
						$('#backgroundImg').attr('src',data.beijing);
						$('#userHead').attr('src',data.logo);
						$('.userName').html(characterLength(data.nickname,4));
						// $('#inviteCode').html(data.invite);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
				$.ajax({
					url: '/fx/invite_code',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = 'data:image/png;base64,'+res.data;
						$('#userCode').attr('src',data);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
			}
			setTimeout(function(){
				getUserInfo();
			},500)
            $('.shareFriend').click(function(){
    //         	layer.msg('正在生成海报', {
				//   icon: 16,
				//   shade: .5
				// });
				// setTimeout(function(){
				    $('.inviteFriendMask').show();
	            	html2canvas($(".inviteFriendBox")[0],{useCORS:true,scrollY: 0,scrollX: 0}).then(function (canvas) {
				        dataURL =canvas.toDataURL("image/png");
				        console.log(dataURL)
				        $("#inviteFriendBox").html("<img src='"+dataURL+"' style='display:block; width:100%;height:100%' />");
				    });
				// },1000)
            })

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }

			//点击育儿育己之旅
			$('.gotoIndex').click(function(){
				location.href="/";
			})
		})
	</script>
</html>
